<template>
  <div class="bell-notification" @click="handleClick" :class="connectionClass">
    <el-badge :is-dot="hasNewNotification" class="bell-badge">
      <el-icon class="bell-icon"><Bell /></el-icon>
    </el-badge>
    <div class="status-tooltip" v-if="showTooltip">
      {{ statusText }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { connectionStatus, initWebSocket } from '@/utils/websocket'
import { Bell } from '@element-plus/icons-vue'

// 新通知状态
const hasNewNotification = ref(false)
// 提示显示状态
const showTooltip = ref(false)

// 状态文本对应表
const statusTextMap = {
  'connected': '已连接',
  'connecting': '连接中',
  'disconnected': '未连接'
}

// 状态类名对应表
const statusClassMap = {
  'connected': 'connected',
  'connecting': 'connecting',
  'disconnected': 'disconnected'
}

// 计算属性：状态文本
const statusText = computed(() => {
  return statusTextMap[connectionStatus.value] || '未知状态'
})

// 计算属性：状态类名
const connectionClass = computed(() => {
  return statusClassMap[connectionStatus.value] || 'disconnected'
})

// 点击处理函数
const handleClick = () => {
  if (connectionStatus.value === 'disconnected') {
    // 断开连接时，点击尝试重新连接
    const userId = localStorage.getItem('userId') || sessionStorage.getItem('userId') || 'admin'
    initWebSocket(userId)
  } else {
    // 已连接时，点击切换提示显示状态
    showTooltip.value = !showTooltip.value
    // 点击后清除新通知标记
    hasNewNotification.value = false
  }
  
  // 自动隐藏提示
  if (showTooltip.value) {
    setTimeout(() => {
      showTooltip.value = false
    }, 3000)
  }
}

// 模拟接收到新通知
const simulateNewNotification = () => {
  hasNewNotification.value = true
  
  // 5秒后自动清除通知，除非用户点击了铃铛
  setTimeout(() => {
    if (hasNewNotification.value) {
      hasNewNotification.value = false
    }
  }, 5000)
}

// 监听连接状态变化
watch(connectionStatus, (newStatus, oldStatus) => {
  if (newStatus === 'connected' && oldStatus !== 'connected') {
    // 当连接成功时，模拟收到一条通知
    simulateNewNotification()
  }
})

// 组件挂载时的处理
onMounted(() => {
  // 如果未连接，尝试自动连接
  if (connectionStatus.value === 'disconnected') {
    setTimeout(() => {
      const userId = localStorage.getItem('userId') || sessionStorage.getItem('userId') || 'admin'
      initWebSocket(userId)
    }, 1000)
  }
})
</script>

<style scoped>
.bell-notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s;
}

.bell-notification:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.bell-icon {
  font-size: 20px;
  color: #606266;
  transition: all 0.3s;
}

.bell-badge :deep(.el-badge__content.is-dot) {
  width: 8px;
  height: 8px;
}

/* 根据连接状态改变样式 */
.connected .bell-icon {
  color: #67C23A;
}

.connecting .bell-icon {
  color: #E6A23C;
  animation: bellShake 1s infinite;
}

.disconnected .bell-icon {
  color: #F56C6C;
}

/* 铃铛摇动动画 */
@keyframes bellShake {
  0% { transform: rotate(0); }
  20% { transform: rotate(8deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

/* 状态提示气泡 */
.status-tooltip {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 100;
  animation: fadeIn 0.2s;
}

.status-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
</style> 